<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物传播路径连连看</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .drag-column, .drop-column {
            border: 2px solid #333;
            border-radius: 8px;
            padding: 15px;
            width: 50%;
        }
        .drag-item {
            background: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 8px 0;
            border-radius: 4px;
            cursor: move;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .drop-item {
            min-height: 30px;
            margin: 10px 0;
            padding: 10px;
            border: 2px dashed #ccc;
            border-radius: 4px;
        }
        .drop-item.correct { border-color: #4CAF50; }
        .drop-item.wrong { border-color: #f44336; }
        #result {
            margin-top: 20px;
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="drag-column">
            <h2 style="text-align: center; margin-bottom: 15px;">拖动食物图标</h2>
            <div class="drag-item" draggable="true" data-answer="Persia --- China">
                Pomegranate 🎨石榴
            </div>
            <div class="drag-item" draggable="true" data-answer="Iran --- China">
                Walnut 🎨核桃
            </div>
            <div class="drag-item" draggable="true" data-answer="Central Asia --- China">
                Coriander 🎨香菜
            </div>
            <div class="drag-item" draggable="true" data-answer="China --- Persia & the Mediterranean">
                Apricot 🎨杏
            </div>
            <div class="drag-item" draggable="true" data-answer="The Western Regions --- China">
                Tea 🎨茶叶
            </div>
            <div class="drag-item" draggable="true" data-answer="The Americas --- China">
                Tomato 🎨番茄
            </div>
            <div class="drag-item" draggable="true" data-answer="China --- Japan">
                Tofu 🎨豆腐
            </div>
            <div class="drag-item" draggable="true" data-answer="China --- South Korea">
                Kimchi 🎨泡菜
            </div>
            <div class="drag-item" draggable="true" data-answer="The Americas --- China">
                Corn 🎨玉米
            </div>
        </div>

        <div class="drop-column">
            <h2 style="text-align: center; margin-bottom: 15px;">匹配传播路径</h2>
            <div class="drop-item" data-answer="Persia --- China">Persia --- China</div>
            <div class="drop-item" data-answer="Iran --- China">Iran --- China</div>
            <div class="drop-item" data-answer="Central Asia --- China">Central Asia --- China</div>
            <div class="drop-item" data-answer="China --- Persia & the Mediterranean">China --- Persia & the Mediterranean</div>
            <div class="drop-item" data-answer="The Western Regions --- China">The Western Regions --- China</div>
            <div class="drop-item" data-answer="The Americas --- China">The Americas --- China</div>
            <div class="drop-item" data-answer="China --- Japan">China --- Japan</div>
            <div class="drop-item" data-answer="China --- South Korea">China --- South Korea</div>
        </div>
    </div>

    <div id="result"></div>

    <script>
        const dragItems = document.querySelectorAll('.drag-item');
        const dropZones = document.querySelectorAll('.drop-item');
        let correctCount = 0;
        let wrongCount = 0;
        let totalItems = dragItems.length;

        dragItems.forEach(item => {
            item.addEventListener('dragstart', e => {
                e.dataTransfer.setData('text/plain', '');
            });
        });

        dropZones.forEach(zone => {
            zone.addEventListener('dragover', e => {
                e.preventDefault();
            });

            zone.addEventListener('drop', e => {
                e.preventDefault();
                const draggedItem = document.querySelector('.drag-item[draggable="true"]:not([style*="display: none"])');
                if (draggedItem) {
                    if (draggedItem.dataset.answer === zone.dataset.answer) {
                        zone.appendChild(draggedItem);
                        zone.classList.add('correct');
                        correctCount++;
                    } else {
                        zone.classList.add('wrong');
                        wrongCount++;
                        // 错误提示
                        setTimeout(() => {
                            zone.classList.remove('wrong');
                        }, 1000);
                    }
                    updateResult();
                }
            });
        });

        function updateResult() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                答题结果：<br>
                正确数量：${correctCount} <br>
                错误数量：${wrongCount} <br>
                剩余未匹配：${totalItems - (correctCount + wrongCount)}
            `;
        }
    </script>
</body>
</html>